<template>
  <div class="header">
    <p>{{ info.app_name }} v{{ info.version }}</p>
  </div>

  <div class="iconList">
    <div class="entry" v-for="item in info.entries">
      <RouterLink :to="item.url" v-if="hasRole(item.role)">
        <div class="icon">
          <el-icon :size="32" color="#409eff">
            <Menu />
          </el-icon>
        </div>
        <div class="text">{{ item.name }}</div>
      </RouterLink>
    </div>
  </div>

  <ToolBar :page="1"/>
</template>
<script setup>
import { Menu } from '@element-plus/icons-vue'
import service from '@/utils/request'
import { ref, onMounted } from 'vue'
import ToolBar from '@/components/ToolBar.vue'
import { getRoleList } from '@/api/student'


const roleList = ref([]);

const hasRole = (roleName)=>{
  return roleList.value.indexOf(roleName)>=0;
}

const info = ref({
  'app_name':'',
  'version':'',
  'entries':[]
})

service.get('/api/common/init').then(res=>{
  info.value = res.data;
}).catch(()=>{})


onMounted(()=>{
  getRoleList().then(res=>{
    roleList.value = res.data;
  })
})
// //获取浏览器窗口的可视宽度
// var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// //获取浏览器窗口的可视高度
// var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// if(w>h){
//   console.log(w,h);
// }else{
//   console.log(w,h);
// }

</script>

<style scoped>
.header{
  padding:20px 40px;
	color: #ffffff;
	letter-spacing: 4px;
  background:#409eff;
}
.header p{
  padding:5px 0px;
  font-size:20px;
}
.iconList{
  padding:20px;
}
.iconList .entry{
  float:left;
  width:25%;
  height:100px;
}
.iconList .entry .icon{
  text-align:center;
  margin-top:25px;
}
.iconList .entry .text{
  text-align:center;
  margin-top:10px;
  font-size:16px;
}

</style>


